<template>
  <!-- <h3>{{ form }}</h3> -->
  <el-date-picker
    v-model="form[item.key]"
    :type="item.dateType"
    :placeholder="$t(placeholderId)"
    :style="style"
    :disabled="itemDisabled"
    @change="change"
  ></el-date-picker>
  <el-time-picker
    v-model="form.inspectionStartDate"
    @change="changeStartTime"
    :disabled="!form.inspectionDate"
    :picker-options="{
      selectableRange: '00:00:00 - 23:59:59',
    }"
    placeholder="起始时间"
  >
  </el-time-picker>
  <el-time-picker
    v-model="form.inspectionEndDate"
    @change="changeEndTime"
    :disabled="!form.inspectionDate"
    :picker-options="{
      selectableRange: '00:00:00 - 23:59:59',
      minTime: startTime,
    }"
    placeholder="起始时间"
  >
  </el-time-picker>
  <!-- <el-time-select placeholder="起始时间" v-model="startTime" @change="changeStartTime">
  </el-time-select>
  <el-time-select placeholder="结束时间" v-model="endTime" @change="changeEndTime">
  </el-time-select> -->
  <!-- <el-time-picker
    v-model="form['inspectionStartDate']"
    @change="changeStartTime"
    placeholder="开始时间"
  >
  </el-time-picker>
  <el-time-picker
    v-model="form['inspectionEndDate']"
    @change="changeEndTime"
    placeholder="结束时间"
  >
  </el-time-picker> -->
</template>

<script lang="ts">
import { defineComponent, PropType, toRefs } from 'vue'
import { DatePick } from '../types'
import useDisabled from '../hooks/useDisabled'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

export default defineComponent({
  props: {
    item: {
      type: Object as PropType<DatePick>,
      required: true,
    },
    form: {
      type: Object as PropType<Record<string, string>>,
      required: true,
    },
    placeholderId: {
      type: String,
      default: () => 'lang.placeholder.input',
    },
    disabled: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      // startTime: '',
      // endTime: '',
      // value1: [null, null],
      // value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
    }
  },
  setup(props) {
    const { form, item } = toRefs(props)
    const change = (value: Date) => {
      console.log(item.value.key)
      if (value) {
        form.value[item.value.key] = dayjs(value).format(item.value.formate)
      }
    }
    const changeStartTime = (value: any) => {
      // console.log(dayjs(value).format('HH:mm:ss'), 'key')
      let time = ''
      time = value ? `${form.value[item.value.key]} ${dayjs(value).format('HH:mm:ss')}` : ''
      form.value['inspectionStartDate'] = time
      // if (value) {
      //   form.value[item.value.key] = dayjs(value).format(item.value.formate)
      // }
    }
    const changeEndTime = (value: any) => {
      // console.log(value, 'key')
      let time = ''
      time = value ? `${form.value[item.value.key]} ${dayjs(value).format('HH:mm:ss')}` : ''
      form.value['inspectionEndDate'] = time
      // if (value) {
      //   form.value[item.value.key] = dayjs(value).format(item.value.formate)
      // }
    }
    const itemDisabled = useDisabled(props.disabled, props.item.disabled)
    return {
      change,
      changeStartTime,
      changeEndTime,
      itemDisabled,
      style: {
        width: props.item?.width ? props.item.width + 'px' : '100%',
        border: '1px soild #000 !important',
      },
    }
  },
})
</script>
